import { ProFormDatePicker, ProTable } from '@ant-design/pro-components';
import { Button, Tag, Popconfirm, message, Breadcrumb } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import styles from './index.less';
import ImportExcel from '../ImportExcel';
import ExportExcel from '@/components/ExportExcel2';
export default () => {
  //获取团队建设列表
  const getAllTeamBuilding = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/teamBuilding/getAllTeamBuilding`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result) => {
        console.log(result);
        result.map((e: any) => {
          if (e.getYear != null) {
            e.getYear = e.getYear + '';
          }
        });
        console.log(result);
      },
    },
  );
  //新增人员
  const addTeamBuilding = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/teamBuilding/addTeamBuilding`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //更新人员
  const updateTeamBuilding = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/teamBuilding/updateTeamBuilding`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //删除人员
  const deleteTeamBuilding = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/teamBuilding/deleteTeamBuilding`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const confirm = (e: any) => {
    deleteTeamBuilding.run({ id: e.id }).then(() => {
      getAllTeamBuilding.run();
      message.success('删除成功');
    });
  };
  const cancel = (e: any) => {
    message.error('已取消');
  };
  const columns = [
    {
      title: '团队名称',
      align: 'center',
      dataIndex: 'teamName',
      key: 'teamName',
      width: 250,
      // ellipsis: true,
      // copyable: true,
    },
    {
      title: '任职年份',
      align: 'center',
      dataIndex: 'year',
      key: 'year',
      valueType: 'dateYear',
      hideInTable: true,
    },
    {
      title: '类别',
      align: 'center',
      dataIndex: 'teamType',
      key: 'teamType',
      width: 150,
      hideInSearch: true,
    },
    {
      title: '学术带头人',
      align: 'center',
      dataIndex: 'teamLeader',
      key: 'teamLeader',
      hideInSearch: true,
      width: 90,
    },
    {
      title: '参加人员',
      align: 'center',
      dataIndex: 'teamMumber',
      key: 'teamMumber',
      // width: 230,
      hideInSearch: true,
    },

    {
      title: '获得年份',
      align: 'center',
      dataIndex: 'getYear',
      key: 'getYear',
      // width: 80,
      hideInSearch: true,
      sorter: {
        compare: (a, b) => a.getYear - b.getYear,
        multiple: 1,
      },
    },

    {
      title: '任职年份',
      align: 'center',
      dataIndex: 'years',
      key: 'years',
      hideInSearch: true,
      render: (text: any) =>
        (text || [])?.sort().map((item: any, index: any) => {
          return <Tag key={index}>{item}</Tag>;
        }),
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      // width: 100,
      render: (text: any, record: any) => [
        <ModalForm
          title="编辑"
          trigger={<a> 编辑 </a>}
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
            destroyOnClose: true,
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            updateTeamBuilding.run(values).then(() => {
              getAllTeamBuilding.run();
            });
            return true;
          }}
          key="1"
          grid={true}
          initialValues={record}
        >
          <ProFormText name="id" hidden />
          <ProForm.Group>
            <ProFormText
              colProps={{ span: 6 }}
              name="teamName"
              label="团队名称"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormText
              colProps={{ span: 6 }}
              name="teamType"
              label="团队类别"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormText
              colProps={{ span: 6 }}
              name="teamLeader"
              label="学术带头人"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormDatePicker.Year
              colProps={{ span: 6 }}
              name="getYear"
              label="获得年份"
              rules={[{ required: true, message: '请选择' }]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              colProps={{ span: 12 }}
              name="teamMumber"
              label="参加人员"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormSelect
              options={[
                {
                  value: 2026,
                  label: '2026',
                },
                {
                  value: 2025,
                  label: '2025',
                },
                {
                  value: 2024,
                  label: '2024',
                },
                {
                  value: 2023,
                  label: '2023',
                },
                {
                  value: 2022,
                  label: '2022',
                },
                {
                  value: 2021,
                  label: '2021',
                },
                {
                  value: 2020,
                  label: '2020',
                },
                {
                  value: 2019,
                  label: '2019',
                },
                {
                  value: 2018,
                  label: '2018',
                },
                {
                  value: 2017,
                  label: '2017',
                },
              ]}
              name="years"
              label="任职年份"
              mode="multiple"
              colProps={{ span: 12 }}
              rules={[{ required: true, message: '请选择' }]}
            />
          </ProForm.Group>
        </ModalForm>,
        <Popconfirm
          key={'2'}
          title="确定删除吗？"
          onConfirm={() => confirm(record)}
          onCancel={() => cancel}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>,
      ],
    },
  ];

  const Refresh = () => {
    getAllTeamBuilding.run();
  };

  return (
    <PageContainer
      header={{
        title:
          '选取年份查询后,绿色代表当年新加入的团队，红色代表当年退出的团队',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>队伍建设与人才培养</Breadcrumb.Item>
            <Breadcrumb.Item>团队建设</Breadcrumb.Item>
          </Breadcrumb>
        ),
        // extra: [
        //   <ImportExcel key="1" tableName={'TEAM_BUILDING'} Refresh={Refresh} />,
        //   <Button
        //     key="2"
        //     type="primary"
        //     onClick={() => {
        //       window.open(
        //         'http://10.1.40.84:9993/file/model/TEAM_BUILDING_模板.xlsx',
        //       );
        //     }}
        //   >
        //     下载模版
        //   </Button>,
        // ],
      }}
      // header={{
      //   extra: [
      //     <ImportExcel key="1" tableName={'TEAM_BUILDING'} Refresh={Refresh} />,
      //     <Button
      //       key="2"
      //       type="primary"
      //       onClick={() => {
      //         window.open(
      //           'http://10.1.40.84:9993/file/model/TEAM_BUILDING_模板.xlsx',
      //         );
      //       }}
      //     >
      //       下载模版
      //     </Button>,
      //   ],
      // }}
    >
      <ProTable
        columns={columns}
        dataSource={getAllTeamBuilding?.data || []}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        rowClassName={(record: any) => {
          if (record.yearFlag === '离开') {
            return styles.leave;
          } else if (record.yearFlag === '正常') {
            return null;
          } else if (record.yearFlag === '新增') {
            return styles.add;
          } else {
            return null;
          }
        }}
        loading={getAllTeamBuilding?.loading}
        dateFormatter="string"
        headerTitle="团队列表"
        options={false}
        onReset={() => {
          getAllTeamBuilding.run();
        }}
        onSubmit={(e) => {
          getAllTeamBuilding.run(e);
        }}
        toolBarRender={() => [
          <div>
            <ExportExcel
              key="ExportExcel"
              dataSource={getAllTeamBuilding?.data}
              columns={columns}
            />
            <ModalForm
              title="新增团队"
              trigger={
                <Button key="primary" type="primary">
                  新增团队
                </Button>
              }
              autoFocusFirstInput
              modalProps={{
                onCancel: () => console.log('run'),
              }}
              submitTimeout={2000}
              onFinish={async (values) => {
                addTeamBuilding.run(values).then(() => {
                  getAllTeamBuilding.run();
                });
                return true;
              }}
              key="1"
              grid={true}
            >
              <ProForm.Group>
                <ProFormText
                  colProps={{ span: 6 }}
                  name="teamName"
                  label="团队名称"
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormText
                  colProps={{ span: 6 }}
                  name="teamType"
                  label="团队类别"
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormText
                  colProps={{ span: 6 }}
                  name="teamLeader"
                  label="学术带头人"
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormDatePicker.Year
                  colProps={{ span: 6 }}
                  name="getYear"
                  label="获得年份"
                  rules={[{ required: true, message: '请选择' }]}
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText
                  colProps={{ span: 12 }}
                  name="teamMumber"
                  label="参加人员"
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormSelect
                  colProps={{ span: 12 }}
                  options={[
                    {
                      value: 2026,
                      label: '2026',
                    },
                    {
                      value: 2025,
                      label: '2025',
                    },
                    {
                      value: 2024,
                      label: '2024',
                    },
                    {
                      value: 2023,
                      label: '2023',
                    },
                    {
                      value: 2022,
                      label: '2022',
                    },
                    {
                      value: 2021,
                      label: '2021',
                    },
                    {
                      value: 2020,
                      label: '2020',
                    },
                    {
                      value: 2019,
                      label: '2019',
                    },
                    {
                      value: 2018,
                      label: '2018',
                    },
                    {
                      value: 2017,
                      label: '2017',
                    },
                  ]}
                  name="years"
                  label="任职年份"
                  mode="multiple"
                  rules={[{ required: true, message: '请选择' }]}
                />
              </ProForm.Group>
            </ModalForm>
          </div>,
        ]}
      />
    </PageContainer>
  );
};
